import React, { Component,PropTypes } from 'react';
import {Link} from 'react-router';
import {WechatAuth} from '../../Action/autoLogin'
import Split from '../CommonComponent/Split'
import Footer from '../CommonComponent/Footer'
import TitleClassify from '../CommonComponent/TitleClassify'
import '../../Stylesheets/wx/personalCenter.css'
import {saveToken,loadToken,GetQueryString,getToken} from '../../Action/rpc';
import {MyInfo,WxLogin,UpgradeCheck} from '../../Action/auth';

const ItemList = [
    {name:'代理结构图',imgUrl:require('../../Images/headerImg.jpg'),link:'/agentStructure'},
    {name:'意向代理',imgUrl:require('../../Images/headerImg.jpg'),link:'/intentionalAgent'},
    {name:'我的推荐',imgUrl:require('../../Images/headerImg.jpg'),link:'/myRecommend'},
    {name:'代理轨迹',imgUrl:require('../../Images/headerImg.jpg'),link:'/agentTrail'},
    {name:'授权证书',imgUrl:require('../../Images/headerImg.jpg'),link:'/toPower'},
    {name:'代理审核',imgUrl:require('../../Images/headerImg.jpg'),link:'/agentExamine'},
    {name:'申请取消',imgUrl:require('../../Images/headerImg.jpg'),link:'/applyCancle'},
    {name:'代理升级',imgUrl:require('../../Images/headerImg.jpg'),link:'/agentUpgrade'},
    {name:'下级代理',imgUrl:require('../../Images/headerImg.jpg'),link:'/subordinate'}
]

const OrderList = [
    {title:'我的订单',imgUrl:require('../../Images/headerImg.jpg'),link:'/orderList'},
    {title:'在线下单',imgUrl:require('../../Images/headerImg.jpg'),link:'/onlineOrder'},
    {title:'待处理订单',imgUrl:require('../../Images/headerImg.jpg'),link:'/pendingOrder'},
    {title:'操作订单',imgUrl:require('../../Images/headerImg.jpg'),link:'/handleOrder'}
]

const personDetail = [
    {name:'待发货',imgUrl:require('../../Images/common/waitSend.png'),num:0,link:'/agentOrderList'},
    {name:'已完成',imgUrl:require('../../Images/common/complete.png'),num:0,link:'/agentOrderList'},
    {name:'全部订单',imgUrl:require('../../Images/common/allOrder.png'),num:0,link:'/agentOrderList'}
    /*{name:'全部订单',imgUrl:require('../../Images/modify.png'),num:0,link:'/orderList'}*/
]

export default class PersonalCenter extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            name:'',
            img:'',
            agentName:'',
            stepName:'',
            grade:'',
            STATUS:0,
            teamName:''
        };
    }
    static contextTypes = {
        router:PropTypes.object
    }
    async componentWillMount() {
        const getToken = loadToken();
        /*if(getToken == '' ||getToken == null ||getToken == 'null'){
            await WechatAuth()
        }*/
        this.getMyInfo();
    }

    async getMyInfo(){
        await MyInfo()
            .then(res=>{
                sessionStorage.setItem('myAgent',res.AGENT_GRADE);
                if(res.AGENT_GRADE==0){
                    this.context.router.push({pathname:'/userCenter'})
                }
                this.setState({name:res.MEMBER_NAME})
                this.setState({img:res.IMAGE_URI})
                this.setState({agentName:res.LEADER_NAME})
                this.setState({stepName:res.AGENT_NAME})
                this.setState({grade:res.AGENT_GRADE});
                this.setState({STATUS:res.STATUS});
                this.setState({teamName:res.TEAM_NAME});

            })
    }

    async upGrade(){
        let upTotal = localStorage.getItem('upTotal')
        let upGrade = localStorage.getItem('upGrade')
        if(this.state.STATUS==1){
            /*let upTotal = localStorage.getItem('upTotal')
            let upGrade = localStorage.getItem('upGrade')*/
            alert('代理升级中，请继续升级')
            this.context.router.push({pathname:'/rechargeFirst',query:{total:upTotal,grade:upGrade,judgeup:0}})
        }else{
            await UpgradeCheck()
                .then(res=>{
                    this.context.router.push({pathname:'/agentUpgrade',query:{total:upTotal,grade:upGrade,judgeup:0}})
                })
                .catch(err=>{
                    alert(err.message)
                })
        }
    }

    render(){
        const {name,img,agentName,stepName,teamName} = this.state
        return(
            <div>
                <div className="containerNav" style={{bottom:0}}>
                    <div className="posr borderBtn" style={{backgroundColor:'rgba(0,0,0,0.4)',paddingTop:30,paddingBottom:35,marginBottom:22,overflow:'hidden'}}>
                        <div style={{zIndex:100,opacity:0}}>
                            <div className="flex width100 flex-align-center flex-pack-center">
                                <Link to={'/toPower'}>
                                    <div className="flex flex-v flex-align-center" style={{width:60}}>
                                        <img src={require('../../Images/common/authority.png')} style={{width:24,height:27,marginBottom:7}} alt=""/>
                                        <span className="colorfff f10">授权</span>
                                    </div>
                                </Link>
                                <div className="border_ra50" style={{marginLeft:45,marginRight:45,width:60,height:60}}>
                                    <img className="border_ra50" src={img} alt=""/>
                                </div>

                                <Link to={'/erCode'}>
                                    <div className="flex flex-v flex-align-center" style={{width:60}}>
                                        <img src={require('../../Images/common/erCode.png')} style={{width:24,height:23,marginBottom:7}} alt=""/>
                                        <span className="colorfff f10">邀请二维码</span>
                                    </div>
                                </Link>
                            </div>
                            <p className="colorfff f16 tc" style={{marginTop:10,marginBottom:20,height:20}}>{name}</p>
                            <div className="tc colorfff f12">
                                <span className="colorye di borderOfficial padd3" style={{height:20,borderRadius:5,marginRight:10}}>{stepName?stepName:'维魅力'}</span>
                                <span>上级:</span><span className="di ml">{agentName}</span>
                                <span className="di ml1">团队:</span><span className="di ml">{teamName}</span>
                            </div>
                        </div>
                        <div className="pa width100 borderBtn" style={{left:0,top:0,bottom:0,zIndex:1,overflow:'hidden'}}>
                            <img className="blur"
                                 src={img} alt=""
                                 style={{opacity:0.6}}
                            />
                        </div>
                        <div style={{zIndex:100,position:'absolute',top:0,paddingTop:30,paddingBottom:35,marginBottom:22}} className="width100">
                            <div className="flex width100 flex-align-center flex-pack-center">
                                <Link to={'/toPower'}>
                                    <div className="flex flex-v flex-align-center" style={{width:60}}>
                                        <img src={require('../../Images/common/authority.png')} style={{width:24,height:27,marginBottom:7}} alt=""/>
                                        <span className="colorfff f10">授权</span>
                                    </div>
                                </Link>
                                <div className="border_ra50" style={{marginLeft:45,marginRight:45,width:60,height:60}}>
                                    <img className="border_ra50" src={img} alt=""/>
                                </div>
                                <Link to={'/erCode'} query={{name:name}}>
                                    <div className="flex flex-v flex-align-center" style={{width:60}}>
                                        <img src={require('../../Images/common/erCode.png')} style={{width:24,height:23,marginBottom:7}} alt=""/>
                                        <span className="colorfff f10">邀请二维码</span>
                                    </div>
                                </Link>
                            </div>
                            <p className="colorfff f16 tc" style={{marginTop:10,marginBottom:20,height:20}}>{name}</p>
                            <div className="tc colorfff f12">
                                <span className="colorye di borderOfficial padd3" style={{height:20,borderRadius:5,marginRight:10}}>{stepName?stepName:'维魅力'}</span>
                                <span>上级:</span><span className="di ml">{agentName}</span>
                                <span className="di ml1">团队:</span><span className="di ml">{teamName}</span>
                            </div>
                        </div>
                    </div>
                    <Split />
                    <div className="df border_top border_bottom ptb1 flex">
                        {
                            personDetail&&personDetail.map((el,index)=>{
                                return(
                                    <Link to={el.link} className="di flex-1 width_100" query={{index:index}}>
                                        <div className="flex-1 tc">
                                            <p style={{margin:0}}>
                                                <span className="di typeImg"><img src={el.imgUrl} alt=""/></span>
                                                {
                                                    /*(tip[index] != 0)?
                                                        <span className="di f12 promptNav colorff border_ra50 pa">{tip[index]}</span>
                                                        :null*/
                                                }
                                            </p>
                                            <div className="f12 m_top color9">{el.name}</div>
                                        </div>
                                    </Link>
                                )
                            })
                        }
                    </div>

                    <Split />
                    <TitleClassify
                        title ={'资金管理'}
                        index={0}
                        img={require('../../Images/common/balance.png')}
                    />
                    <div className="flex flex-pack-justify border_top" style={{height:'6.25rem'}}>
                        <Link
                            to="/balance"
                            className="di flex-1 homePage border_right border_bottom"
                        >
                            <div className="width100 height100 balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/myBalance.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>我的余额</div>
                            </div>
                        </Link>
                        <Link
                            to="/paymentForGoods"
                            className="di flex-1 homePage border_right border_bottom"
                        >
                            <div className="width100 height100 balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/recharge.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>我的货款</div>
                            </div>
                        </Link>
                        {/* <Link to="/myBankList" className="di flex-1 border_right homePage border_bottom">
                            <div className="width100 height100 agent balanceBorder flex flex-v flex-pack-center flex-align-center" >
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/bankList.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>银行卡</div>
                            </div>
                        </Link>
                        <Link
                            to="/MyPoints"
                            className="di flex-1 homePage border_bottom"
                        >
                            <div className="width100 height100 balanceBorder flex flex-v flex-pack-center flex-align-center" >
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/exam.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>我的积分</div>
                            </div>
                        </Link>*/}
                    </div>
                    {/* <div className="flex flex-pack-justify" style={{height:'6.25rem'}}>

                        <div className="di homePage flex-1"></div>
                        <div className="di homePage flex-1"></div>
                    </div>*/}
                    <Split />

                    <TitleClassify
                        title ={'进货管理'}
                        index={1}
                        img={require('../../Images/common/purchaseManage.png')}
                    />
                    <div className="flex flex-pack-justify" style={{height:'6.25rem'}}>
                        <Link
                            to="/purchaseOrder"
                            className="di flex-1 border_top border_right border_bottom homePage"
                            query={{index: 0}}
                        >
                            <div className="width100 height100 order balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/myOrder.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>进货订单</div>
                            </div>
                        </Link>
                        <Link to="/pendingOrder" className="di flex-1 border_top border_right border_bottom homePage" query={{index: 0}}>
                            <div className="width100 height100 order balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/pendOrder.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>发货订单</div>
                            </div>
                        </Link>
                        <Link className="di homePage flex-1 border_top border_bottom" to='/purchase'>
                            <div className="width100 height100 Shipment balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/Purchase.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>进货</div>
                            </div>
                        </Link>
                    </div>
                    <Split />

                    <TitleClassify
                        title ={'库存管理'}
                        index={2}
                        img={require('../../Images/common/Shipment.png')}
                    />
                    <div className="flex flex-pack-justify" style={{height:'6.25rem'}}>
                        <Link className="di homePage flex-1 border_top border_right border_bottom" to='/myStock'>
                            <div className="width100 height100 Shipment balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/related.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>我的库存</div>
                            </div>
                        </Link>
                        <Link to="/distribution" className="di flex-1 border_top border_right border_bottom homePage" query={{index: 0}}>
                            <div className="width100 height100 order balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/distribution.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>申请配货订单</div>
                            </div>
                        </Link>
                        <Link
                            to="/myDistribution"
                            className="di flex-1 border_top homePage border_bottom"
                            query={{index: 0}}
                        >
                            <div className="width100 height100 order balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/myDistribution.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>配货出库</div>
                            </div>
                        </Link>
                    </div>
                   <div className="flex flex-pack-justify" style={{height:'6.25rem'}}>
                       <Link
                           to="/returnGoods"
                           className="di flex-1 border_right border_bottom homePage"
                           query={{index: 0}}
                       >
                           <div className="width100 height100 order balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/returnApply.png')} alt=""/>
                                </span>
                               <div className="color9 f14" style={{marginTop:10}}>退货申请</div>
                           </div>
                       </Link>
                        <Link to="/myReturnChange" className="di flex-1 border_right border_bottom homePage" query={{index: 0}}>
                            <div className="width100 height100 order balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/return.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>我的退换货订单</div>
                            </div>
                        </Link>
                       <Link to="/reAndChangeTest" className="di flex-1 homePage border_bottom">
                           <div className="width100 height100 agent balanceBorder flex flex-v flex-pack-center flex-align-center" >
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/powerBook.png')} alt=""/>
                                </span>
                               <div className="color9 f14" style={{marginTop:10}}>退换货审批</div>
                           </div>
                       </Link>
                    </div>
                    <Split />

                    {/*<TitleClassify
                        title ={'配货管理'}
                        index={3}
                        img={require('../../Images/common/distributionManage.png')}
                    />
                    <div className="flex flex-pack-justify " style={{height:'6.25rem'}}>
                        <Link to="/distribution" className="di flex-1 border_top border_right border_bottom homePage" query={{index: 0}}>
                            <div className="width100 height100 order balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/distribution.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>申请配货订单</div>
                            </div>
                        </Link>
                        <Link
                            to="/myDistribution"
                            className="di flex-1 border_top border_right border_bottom homePage"
                            query={{index: 0}}
                        >
                            <div className="width100 height100 order balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/myDistribution.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>配货出库</div>
                            </div>
                        </Link>
                        <div className="di homePage flex-1"></div>
                    </div>
                    <Split />*/}
                    {/*<TitleClassify
                        title ={'我的凭证'}
                        index={2}
                        img={require('../../Images/common/distributionManage.png')}
                    />
                    <div className="flex flex-pack-justify" style={{height:'6.25rem'}}>
                        <Link
                            className="di homePage flex-1 border_top border_right border_bottom"
                            to='/myCredentials'
                            query={{index: 0}}
                        >
                            <div className="width100 height100 Shipment balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/exam.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>我的凭证</div>
                            </div>
                        </Link>
                        <div className="di homePage flex-1"></div>
                        <div className="di homePage flex-1"></div>
                    </div>*/}
                    <TitleClassify
                        title ={'审核管理'}
                        index={1}
                        img={require('../../Images/common/shenhe.png')}
                    />
                    <div className="flex flex-pack-justify" style={{height:'6.25rem'}}>
                        <Link
                            to="/payOrder"
                            className="di flex-1 border_top border_right border_bottom homePage"
                            query={{index: 0,type:1}}
                        >
                            <div className="width100 height100 order balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/returnApply.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>货款充值审核</div>
                            </div>
                        </Link>
                        <Link
                            to="/payOrder"
                            className="di flex-1 border_top border_right border_bottom homePage"
                            query={{index: 0,type:4}}
                        >
                            <div className="width100 height100 order balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/bankList.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>代理升级审核</div>
                            </div>
                        </Link>
                        <Link
                            className="di homePage flex-1 border_top border_bottom"
                            to='/payOrder'
                            query={{index: 0,type:3}}>
                            <div className="width100 height100 Shipment balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/Purchase.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>代理申请审核</div>
                            </div>
                        </Link>
                    </div>
                    <div className="flex flex-pack-justify" style={{height:'6.25rem'}}>
                        {/*<Link
                            to="/payOrder"
                            className="di flex-1 border_right homePage border_bottom"
                            query={{index: 0,type:2}}
                        >
                            <div className="width100 height100 agent balanceBorder flex flex-v flex-pack-center flex-align-center" >
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/return.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>订单审核</div>
                            </div>
                        </Link>*/}
                        <Link
                            to="/payOrder"
                            className="di flex-1 border_right homePage border_bottom"
                            query={{index: 0,type:5}}
                        >
                            <div className="width100 height100 agent balanceBorder flex flex-v flex-pack-center flex-align-center" >
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/distribution.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>奖励审核</div>
                            </div>
                        </Link>


                        <Link
                            className="di homePage flex-1 border_right border_bottom"
                            to='/myCredentials'
                            query={{index: 0}}
                        >
                            <div className="width100 height100 Shipment balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/exam.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>我的凭证</div>
                            </div>
                        </Link>
                        <div className="di homePage flex-1"></div>
                    </div>
                    <Split />

                    <TitleClassify
                        title ={'代理管理'}
                        index={4}
                        img={require('../../Images/common/agent.png')}
                    />
                    <div className="flex flex-pack-justify border_top" style={{height:'6.25rem'}}>
                        <Link to="/subordinate" className="di flex-1 border_right homePage">
                            <div className="width100 height100 agent balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/downAgent.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>下级代理</div>
                            </div>
                        </Link>
                        <Link to="/myRecommend" className="di flex-1 border_right homePage">
                            <div className="width100 height100 agent balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/myRecomend.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>我的推荐</div>
                            </div>
                        </Link>
                        <Link to="/agentStructure" className="di flex-1 homePage">
                            <div className="width100 height100 agent balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/agentImg.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>代理结构图</div>
                            </div>
                        </Link>
                    </div>

                    <div className="flex flex-pack-justify border_top" style={{height:'6.25rem'}}>
                        <Link to="/toPower" className="di flex-1 border_right homePage border_bottom">
                            <div className="width100 height100 agent balanceBorder flex flex-v flex-pack-center flex-align-center" >
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/powerBook.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>授权证书</div>
                            </div>
                        </Link>
                        <div onClick={()=>this.upGrade()} className="di flex-1 border_right homePage border_bottom">
                            <div className="width100 height100 agent balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/agentUp.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>代理升级</div>
                            </div>
                        </div>
                         {/*<div className="di homePage flex-1"></div>*/}
                        <div className="di homePage flex-1"></div>
                    </div>
                    <Split />
                    <div style={{height:70}}></div>
                </div>
                <Footer
                    index = {3}
                />
            </div>
        )
    }
}
